<template>
 <div class="home" id="home">
   <div class="home-div" v-show="flag">
     <img src="../../assets/img/5.jpg" alt="" @click="GoTop">
   </div>
     <Banner></Banner>
     <p class="bgc-bj"></p>
     <See></See>
     <p class="bgc-bj"></p>
     <Album></Album>
     <p class="bgc-bj"></p>
     <Alllist></Alllist>
 </div>
</template>

<script>
import Alllist from "@/components/Home/Alllist.vue";
import Album from "@/components/Home/Album.vue";
import See from "@/components/Home/See.vue";
import Banner from "@/components/Home/Banner.vue";
export default {
  name: "",
  data() {
    return {
      flag: false
    };
  },
  mounted() {
    var obj = document.getElementById("home");
    obj.addEventListener("scroll", e => {
      // console.log(e);
      if (e.target.scrollTop >= e.target.clientHeight) {
        this.flag = true;
      } else {
        this.flag = false;
      }
    });
  },
  methods: {
    GoTop() {
      var obj = document.getElementById("home");
      obj.scrollTop = 0;
    }
  },
  computed: {},
  watch: {},
  components: { Banner, See, Album, Alllist }
};
</script>

<style scoped>
.home {
  width: 100%;
  height: 100%;
  overflow: auto;
}
.home-div {
  width: 100%;
  height: 50px;
  position: fixed;
  top: 0;
  left: 0;
  text-align: center;
  z-index: 9999;
}
.home-div > img {
  width: 100px;
  height: 50px;
}
.bgc-bj {
  width: 100%;
  height: 10px;
  background-color: #ccc;
}
</style>